<template>
  <div class="app">
      <header class="top">
          <div>
          <span><router-link tag="span"  to="day1">&lt</router-link></span>
          <span>发现</span></div>
          </header> 
       
  <section   v-for="(v,i) in list" :key="i"   class="_nav">
       
    <section  class="nav">
   
              <div class="div">
                    
                    <section>
                <div> <p class="colo">{{v.name}}</p>
                 <p class="p_1">{{v.name1}}</p></div>
         
          
                  <img :src="v.img" alt="">
              </section>

              </div>



              <div class="div">
                    <section>
                <div> <p class="red">{{v.name2}}</p>
                 <p class="p_1">{{v.name3}}</p></div>
         
          
                  <img :src="v.img2" alt="">
              </section>
              </div>


          </section></section>


          <section class="banner">
                <img src="https://fuss10.elemecdn.com/b/6d/656006edcd86033a1b32b23ddea37jpeg.jpeg?imageMogr/format/webp/" alt="">
          </section>
        <section class="font">
                <div class="font-b">-没事热推-</div>
                <div>你的口味，我都懂得</div>

      
        </section>
          <div class="cate">
            <div>
            <p>
                <a href="https://h5.ele.me/ulike/#request_id=40a04e12-89bb-4c96-aced-43faf9732f4f"><img src="https://fuss10.elemecdn.com/8/63/95b60d16c075e960a5cd9389101b8jpeg.jpeg?imageMogr/format/webp/" alt=""></a></p>
            <p>南昌小炒肉盖饭</p>
            <p class="red">¥16</p></div>

            <div> <p>
                <a href="https://h5.ele.me/ulike/#request_id=7ef7ffd1-729b-4a05-a55e-c233e4c4d489"><img src="https://fuss10.elemecdn.com/a/43/9d3a88b5f5f1a14e0e6ff40d0ac4cjpeg.jpeg?imageMogr/format/webp/" alt=""></a></p>
            <p>招牌土豆焖牛肉饭</p>
            <p class="red">¥37.9</p></div>


            <div> 
                <p>
                    <a href="https://h5.ele.me/ulike/"><img src="https://fuss10.elemecdn.com/2/f5/cd9c2cdc5b4cce4816a7cfcc64121jpeg.jpeg?imageMogr/format/webp/" alt=""></a></p>
            <p>安格斯肥牛饭</p>
            <p class="red">¥22</p></div>



        </div>

        <p class="gd">
            查看更多<
        </p>



 <section class="content">

            <div class="content_div">
                <div class="font-b">-天天特价-</div>
                <div>特价商品，一网打尽</div>
            </div>

                <section class="cate" >
                     <div>
            <p>
                <a href="https://h5.ele.me/ranking/#type=special_food&rank_id=7a59e1a7e0e1422fba79404b04260d8a" alt="">
                  <img src="https://fuss10.elemecdn.com/e/55/e34a2715bd803a0016733dcdacdcdjpeg.jpeg?imageMogr/format/webp/" alt="">
                </a></p>
            <p>三鲜芒果盖饭</p>
            <p class="red">¥16</p></div>

            <div> <p>
                <a href="https://h5.ele.me/ranking/#type=special_food&rank_id=ce3af05c507c4fc9b01030c8f204a2c8">
                <img src="https://fuss10.elemecdn.com/d/63/cc5b3f64f771715f7ac9be6ff4ea8jpeg.jpeg?imageMogr/format/webp/" alt=""></a></p>
            <p>三鲜虾仁水饺</p>
            <p class="red">¥13</p></div>


            <div> 
                <p>
                    <a href="https://h5.ele.me/ranking/#type=special_food&rank_id=0a502d2fedc84e66bedc3ffb70167249">
                    <img src="https://fuss10.elemecdn.com/2/05/b4479d9bac52d7eac18e4ac0bc1d2jpeg.jpeg?imageMogr/format/webp/" alt=""></a></p>
            <p>虾仁饭+虎头酱+果汁</p>
            <p class="red">¥21</p></div>
                </section> 

        </section>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          name: "金币商城",
          name1: "最穷外卖指南",
          img:
            "https://fuss10.elemecdn.com/8/38/9c9aea0e856149083d84af3444b78jpeg.jpeg?imageMogr/format/webp/",
          name2: "有红包快抢",
          name3: "礼包福利领不停",
          img2:
            "https://fuss10.elemecdn.com/f/85/2bb180f2052c33cfec3852ef2bfccjpeg.jpeg?imageMogr/format/webp/"
        },
        {
          name: "必吃爆料",
          name1: "最夯外卖指南",
          img:
            "https://fuss10.elemecdn.com/2/36/b784087aff96a97f4e5183d0d784fjpeg.jpeg?imageMogr/format/webp/",
          name2: "推荐有奖",
          name3: "5元现金拿不停",
          img2:
            "https://fuss10.elemecdn.com/6/76/8d42eef97ff4c1c2b671085358541jpeg.jpeg?imageMogr/format/webp/"
        },
        {
          name: "周边优惠",
          name1: "领取口碑好券",
          img:
            "https://fuss10.elemecdn.com/5/10/2351e989d4171479ba0d7b5c06053jpeg.jpeg?imageMogr/format/webp/",
          name2: "百元红包",
          name3: "兴业银行联名卡",
          img2:
            "https://fuss10.elemecdn.com/3/cc/a45d2b9d7d09bbc49b40d4e626093jpeg.jpeg?imageMogr/format/webp/"
        }
      ]
    };
  }
};
</script>



<style lang="less">
.px2rem(@prop,@px) {
  @{prop}: @px /75 * 1rem;
}

.app {
  background: rgb(245, 245, 245);
}
._nav {
  display: flex;
  background: #fff;
}
.banner {
  width: 100%;
  margin-top: 3%;
  margin-bottom: 3%;
  img {
    width: 100%;
  }
}
.red {
  color: red;
}
.top {
  background: rgb(0, 138, 255);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;

  div {
    width: 50%;
    .px2rem(height,50);
    margin: 0 left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    span {
      font-weight: bold;
    }
  }
}
.nav {
  width: 100%;
  margin-top: 6%;
  display: flex;
  justify-content: space-between;
  .div {
    width: 50%;
    //    border-right: 1px solid #ccc;
    section {
      border-bottom: 1px solid #ccc;
      border-right: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    img {
      width: 35%;
    }
  }
}
.p_ {
  border-bottom: 1px solid #ccc;
  height: 80%;
  display: flex;
  justify-content: space-between;
}
.colo {
  color: rgb(255, 256, 8);
  padding-left: 5%;
}
.p_1 {
  padding-left: 5%;
}
.font {
  background: #fff;
  width: 100%;
  div {
    width: 40%;
    margin: 0 auto;
    text-align: center;
  }
}
.font-b {
  font-weight: bold;
  .px2rem(font-size,30);
}
.cate {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  div {
    width: 32%;
    p {
      margin: 2%;
      text-align: center;
      img {
        width: 60%;
      }
    }
  }
}
.gd {
  background: #fff;
  margin: 0 auto;
  text-align: center;
}
.content {
  width: 100%;
  background: #fff;
//   margin: 2%;
margin-top: 2%;
margin-bottom: 2%;
  
  .content_div {
      width: 100%;
    margin: 0 auto;
    text-align: center;
  }
}

</style>
